<template>
    <!--编辑对话框-->
     <el-dialog 
      title="添加商品信息"
      v-model="editVisible"
      width="70%"  
      @close="closeedit"
     >
     <el-form
        ref="ruleFormRef"
        :model="goodsForm1"
        :rules="rule1"
       
      >
        <el-form-item label="商品名称" prop="title">
          <el-input v-model="goodsForm1.title" />
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="goodsForm1.price" />
        </el-form-item>
        <el-form-item label="商品图片">
        <img  :src="imageUrl" class="avatar" style="width: 180px;height: 180px;"/>
            </el-form-item>
        </el-form>
     <template #footer>
        <span class="dialog-footer">
            <el-button @click="editVisible = false">取消</el-button>
            <el-button type="primary" @click="editshooing">确定</el-button>
        </span>
     </template>
     </el-dialog>
        </template>

<script setup>
import { reactive, ref } from "vue"
import { useUsersStore } from "../store/shooing"
import { storeToRefs } from "pinia"

import axios from "axios";
let store = useUsersStore()
let { editVisible, goodsForm1, imageUrl } = storeToRefs(store)
let rule1 = reactive({
    title: [{ required: true, message: "请填写商品名称", trigger: 'blur' }],
    price: [{ required: true, message: "请填写商品价格", trigger: 'blur' }]
})
let ruleFormRef = ref()
//关闭对话框
function closeedit() {
    ruleFormRef.value.resetFields()
}
//点击确定，进行编辑
function editshooing() {
    ruleFormRef.value.validate((bool) => {
        if (!bool) return
        axios.post("/goods/edit", {
            goodsId: store.godsId,
            title: store.goodsForm1.title,
            price: store.goodsForm1.price,
        }).then((res) => {
            store.load()
            store.editVisible = false
        })
    })
}
</script>